/*
 * @Author: jipeng.Li
 * @Date: 2020-01-15  15:32:52.91
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2020-02-03  10:30:52
 * @Description: 信息卡
 */
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { fontColorBlack, fontColorSecDeepGray, px2dp } from '../../../../../../common/styles';
import { iconTruckGray, iconUserGray } from '../../../../../../image';
import supply from '../../../../../../api/supply';

const InfoCard = (props) => {
  const { info, type, name, imgUrl, isRight, des } = props;
  const [truckTypeDict, setTruckTypeDict] = useState([]);
  const imageHeadImage = {
    1: imgUrl ? { uri: imgUrl } : iconUserGray,
    2: iconTruckGray
  };
  useEffect(() => {
    supply.allCarModel().then(res => {
      if (res.success) {
        let truckTypeDictInitData = [];
        res.data.forEach(item => {
          truckTypeDictInitData[item.id] = item.name;
        });
        setTruckTypeDict(truckTypeDictInitData);
      }
    });
  }, []);
  return (
    <View style={style.infoCardContainer}>
      <Image
        style={style.infoCardImage}
        source={imageHeadImage[type]}
        resizeMode='stretch'
      />
      <View style={{ flexDirection: 'row', flex: 1, alignItems: 'center' }}>
        <View style={{ flex: 1 }}>
          <Text
            numberOfLines={1}
            style={style.nameOrCar}
          >
            {name}
          </Text>
          <Text
            numberOfLines={1}
            style={{
              color: fontColorSecDeepGray,
              fontSize: px2dp(24)
            }}
          >
            {type === 1 ? `运单 ${info.waybillCount}` : `${truckTypeDict[info.carType]} ${info.carLength}米`}
          </Text>
        </View>
        {
          isRight &&
          <View>
            <Image
              style={{
                width: px2dp(24),
                height: px2dp(24),

              }}
              source={require('../../../../../../image/wl/icon_right_gray.png')}
              resizeMode='stretch'
            />
          </View>
        }
      </View>
    </View>
  );
};

const style = StyleSheet.create({
  infoCardContainer: {
    flexDirection: 'row',
    height: px2dp(88),
    justifyContent: 'space-between',
  },
  infoCardImage: {
    width: px2dp(88),
    height: px2dp(88),
    marginRight: px2dp(15)
  },
  nameOrCar: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    color: fontColorBlack,
    fontSize: px2dp(32)
  }
});

export default InfoCard;
